<template>
  <div class="page backgroundImg">
    <div class="cards">
        <div class="card" v-for="item in getProject?.projects">
            <div class="title projectName">{{item.ename}}<span v-if="item.link">(链接：{{item.link}})</span></div>
            <div><span class="title">项目描述：</span> {{item.describee}}</div>
            <div><span class="title">技术栈：</span> {{item.technology}}</div>
            <div><span class="title">责任描述：</span> {{item.responsibility}}</div>
            <div><span class="title" v-if="item.problem">主动性：</span> {{item.problem}}</div>
        </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { storeToRefs } from "pinia";
import { getOppoDetailProject } from "~/server/home";
import { useAllStore } from '~/stores/index'
const store = useAllStore()
const {getProject}= storeToRefs(store)

</script>

<style scoped lang="scss">
/* @keyframes meBox-text1 {
  0% {
    transform: translate(-500px,-500px) scale(0) rotate(180deg);
  }
  100% {
    transform: translate(0,0);
  }
} */
.page {
    /* overflow: hidden; */
     /* background-image: linear-gradient(to left, #e4e6d5, #eff6e8); */
    background-image: url("https://img1.baidu.com/it/u=4168392839,3320795671&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800");
     /* background: linear-gradient(
    180deg,
    #000000 0%,
    #2f0404 100%
  ); */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 10;
  .cards{
    width: 100%;
 /* position: absolute;
 top: 71px;
 left: 50%;
 transform: translate(-50%);
 height: 400px;
 width: 1000px; */
 .card{
  box-sizing: border-box;
 background: rgb(237, 228, 226);
 border-radius: 10px;
 width: 90%; 
 margin: 0 auto 10px;
 /* animation-name: meBox-text1;
  animation-duration: 2s; */
  /* background-image: url("https://picnew2.photophoto.cn/20080320/jingmeidebiankuangtupian-14822637_1.jpg"); */
 line-height: 22px;
 word-break: break-all;
 padding: 15px 20px 10px;
 font-size: 13px;
 .title{
 font-size: 16px;
 font-weight: bold;
 }
 .projectName{
  margin-bottom: 5px;
 font-size: 16px;
text-align:center
 }
 }
  }
}
::-webkit-scrollbar {
  display: none;
}
@media screen and (min-width: 1250px) {
  .page {
  .cards{
 position: absolute;
 top: 71px;
 left: 50%;
 transform: translate(-50%);
 height: 400px;
 width: 1000px;
 .card{

 margin:0 0 10px;
 width: 1000px; 
 .title{
 }
 .projectName{
 }
 }
  }
}

}

</style>
